<template>
<div class="list">
    <div>
        <div v-for="(item, index) in list" :key="index">
            <div class="block" @click="toArticel(item)">
                <p class="title">{{ item.title }}</p>
                <p class="content">{{ item.content.slice(0, 200) }}</p>
                <p class="createdTime">{{ item.createdTime }}</p>
            </div>
        </div>
    </div>
    <div class="message">
        <div v-if="moreShowBoolen">tips：滚动加载更多</div>
        <div v-else>已无更多</div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            moreShowBoolen: false,
            nowPage: 1,
            scrollHeight: 0
        };
    },

    mounted() {
        this.init();

        window.addEventListener("scroll", () => {
            const scrollY =
                document.documentElement.scrollTop || document.body.scrollTop;
            const vh =
                document.compatMode === "CSS1Compat" ?
                document.documentElement.clientHeight :
                document.body.clientHeight;
            const allHeight = Math.max(
                document.body.scrollHeight,
                document.documentElement.scrollHeight
            );
            if (scrollY + vh >= allHeight) {
                this.scrollMore();
            }
        });
    },

    methods: {
        init() {
            this.$http.get("/articles").then(res => {
                console.log(res.data);
                if (res.data.length <= 10) {
                    this.list = res.data;
             
                    this.moreShowBoolen = false;
                } else {
                    this.list = res.data.slice(0, 10);

                    this.moreShowBoolen = true;
                }
            });
        },

        scrollMore() {
            this.$http.get("/articles").then(res => {
                this.list = this.list.concat(
                    res.data.slice(this.nowPage * 10, (this.nowPage + 1) * 10)
                );

                this.nowPage++;

                if (res.data.length >= this.nowPage * 10) {
                    this.moreShowBoolen = true;
                } else {
                    this.moreShowBoolen = false;
                }
            });
        },
        toArticel(item) {
            this.$router.push({
                path: "/articleDetail",
                query: {
                    title: item.title,
                    content: item.content,
                    createdTime: item.createdTime
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.block {
    width: 100%;
    margin: 40px 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .title {
        font-size: 25px;
        font-weight: 700;
    }

    .content {
        font-size: 20px;
    }
}

.message {
    text-align: center;
    font-size: 30px;
}
</style>
